<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "linePicture",
  props: {
    title: "",
    tableChoice: "",
  },
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
  },
  created() {},

  methods: {
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
      // window.open(url);
    },

    async drawLine(echartsList) {
      console.log("echartsList", echartsList);
      console.log("tableChoice", this.tableChoice);
      const arr = this.tableChoice.split(",");
      let arrr = arr.map((item) => item.split("|"));
      this.nameArr = arrr;
      console.log("nameArr", this.nameArr);
      this.echartsList = echartsList;
      this.list = this.echartsList[0].dataList;

      if (echartsList != null && echartsList.length > 0) {
        let ylist = [];
        let e = this.echartsList[0].dataList;
        this.dataColumn = this.echartsList[0].dataColumn;
        this.openColumn = this.echartsList[0].openColumn;
        this.labelName = e[0][this.openColumn];
        ylist = e.map((item) => item[this.dataColumn]);
        console.log("ylist", ylist);

        if (this.echartsList.length > 0) {
          this.echartsList1 = this.echartsList[0].dataList;
          console.log("this.echartsList1", this.echartsList1);
        }

        let arr1 = this.echartsList1.map((item) => {
          return item.demand_export;
        });
        let arr2 = this.echartsList1.map((item) => {
          return item.demand_feed;
        });
        let arr3 = this.echartsList1.map((item) => {
          return item.demand_other;
        });
        let arr4 = this.echartsList1.map((item) => {
          return item.demand_ration;
        });
        let arr5 = this.echartsList1.map((item) => {
          return item.supply_import;
        });
        let arr6 = this.echartsList1.map((item) => {
          return item.supply_production;
        });
        let myChart = echarts.init(this.worldMapContainer);

        let option = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 18,
            },
            axisPointer: {
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          animation: false,
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              saveAsImage: { show: true },
            },
          },

          legend: {
            textStyle: {
              fontSize: "16",
              fontWeight: "",
            },
          },
          xAxis: {
            // data: xlist,
            axisLabel: {},
            type: "value",
          },
          grid: {
            show: true,
            left: "10px",
            right: "10px",
            bottom: "10px",
            containLabel: true,
            borderWidth: 1,
            borderColor: "#D1D1D1",
            backgroundColor: "#fff",
            containLabel: true,
          },
          yAxis: {
            axisLabel: {},
            type: "category",
            data: ylist,
          },
          series: [
            {
              name: "出口",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: "",
              },
              emphasis: {
                focus: "series",
              },
              data: arr1,
            },
            {
              name: "饲料",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: "",
              },
              emphasis: {
                focus: "series",
              },
              data: arr2,
            },
            {
              name: "其他",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: "",
              },
              emphasis: {
                focus: "series",
              },
              data: arr3,
            },
            {
              name: "口粮",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: "",
              },
              emphasis: {
                focus: "series",
              },
              data: arr4,
            },
            {
              name: "进口",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: "",
              },
              emphasis: {
                focus: "series",
              },
              data: arr5,
            },
            {
              name: "生产",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: "",
              },
              emphasis: {
                focus: "series",
              },
              data: arr6,
            },
          ],
        };
        if (this.isDownLoad == 1) {
          option.xAxis.axisLabel = { fontSize: "90", lineHeight: 150 };
          option.yAxis.axisLabel = { fontSize: "90" };
          option.yAxis.axisLabel = { fontSize: "90" };
          // option.title.textStyle.fontSize = 90;
          // option.title.textStyle.lineHeight = 150;
          // option.grid.top = 150;
          option.legend.textStyle.fontSize = 90;
          option.legend.textStyle.fontWeight = 40;
          option.legend.itemHeight = 20;
          option.legend.itemWidth = 40;
          option.legend.icon = "rect";
          option.legend.top = 40;
          option.tooltip.textStyle.fontSize = 90;
          option.series[0].label.fontSize = 90;
          option.series[1].label.fontSize = 90;
          option.series[2].label.fontSize = 90;
          option.series[3].label.fontSize = 90;
          option.series[4].label.fontSize = 90;
          option.series[5].label.fontSize = 90;
          // option.series[0].lineStyle = {
          //   width: 20,
          //   type: "solid",
          // };
        }
        myChart.setOption(option);

        if (this.isDownLoad == 1) {
          const chartImgUrl = myChart.getDataURL({
            pixelRatio: 1,
            backgroundColor: "",
            type: "png",
          });
          setTimeout(() => {
            this.downloadFile(chartImgUrl, this.title);
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
